<template>
  <div style="height: 100%;width: 100%;">
<!--    <div :id="id" style="width: 150px; height: 150px"></div>-->
    <Echart
      :options="options"
      :id="id"
      height="150px"
      width="150px"></Echart>
  </div>
</template>

<script>
  // import 'echarts-liquidfill'
  import Echart from '@/common/echart'
  export default {
    data() {
      return {
        options: {},
      }
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
      id: {
        type: [Number, String],
        default: "main",
      }
    },
    watch: {
      cdata: {
        handler(newData) {
          let value
          // 指定图表的配置项和数据
          // if (newData) {
          value = newData.bfb;
          // } else {
          //   value = this.count;
          // }
          let data = [value, value, value];
          this.options = {
            title: {
              text: (value * 100).toFixed(0) + '{a|%}',
              textStyle: {
                fontSize: 16,
                fontFamily: 'Microsoft Yahei',
                fontWeight: 'normal',
                color: '#ffffff',
                rich: {
                  a: {
                    fontSize: 16,
                  }
                }
              },
              x: 'center',
              y: '45%'
            },
            graphic: [{
              type: 'group',
              left: 'center',
              top: '65%',
              children: [{
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                  fill: '#ffffff',
                  text: newData.bfbNameOne,
                  font: '12px Microsoft YaHei'
                }
              }]
            }],
            series: [{
              type: 'liquidFill',
              data: data,
              center: ['50%', '60%'],
              itemStyle: {
                shadowBlur: 0
              },
              outline: {
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#16D0FF',
                  // shadowBlur: 20,
                }
              },
              backgroundStyle: {
                color: '#033366'
              },
              label: {
                normal: {
                  formatter: '',
                }
              }
            }]
          }
        },
        immediate: true,
        deep: true
      }
    },
    mounted() {
      // this.init(this.count);
    },
    methods: {
      init(newData) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(this.id));
        let value
        // 指定图表的配置项和数据
        // if (newData) {
          value = newData;
        // } else {
        //   value = this.count;
        // }
        let data = [value, value, value];
        let option = {
          title: {
            text: (value * 100).toFixed(0) + '{a|%}',
            textStyle: {
              fontSize: 16,
              fontFamily: 'Microsoft Yahei',
              fontWeight: 'normal',
              color: '#ffffff',
              rich: {
                a: {
                  fontSize: 16,
                }
              }
            },
            x: 'center',
            y: '45%'
          },
          graphic: [{
            type: 'group',
            left: 'center',
            top: '65%',
            children: [{
              type: 'text',
              z: 100,
              left: '10',
              top: 'middle',
              style: {
                fill: '#ffffff',
                text: this.bfbNameOne,
                font: '12px Microsoft YaHei'
              }
            }]
          }],
          series: [{
            type: 'liquidFill',
            data: data,
            center: ['50%', '60%'],
            itemStyle: {
              shadowBlur: 0
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#16D0FF',
                // shadowBlur: 20,
              }
            },
            backgroundStyle: {
              color: '#033366'
            },
            label: {
              normal: {
                formatter: '',
              }
            }
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>
